<template>
    <view class="content">
        <u-navbar :background="background" :border-bottom="false" :immersive="true" :is-back="false">
            <view class="head">
                <view class="head-left" @click="$gTo(`/mine/pages/city/city`)">
                    <view class="head-add">{{ cityName || '请选择' }}</view>
                    <u-icon name="arrow-down-fill" color="#fff" size="18"></u-icon>
                </view>
                <!-- <image :src="IMAGEURL + 'static/image/logo.png'" class="logo-01"></image> -->
            </view>
        </u-navbar>
        
        <view class="wrapper">
            <view class="swiper-box">
                <u-swiper :list="data.rotation_image" height="610" interval="5000" duration="700" border-radius="0" indicator-pos="bottomLeft" 
                    @click="toGuangGao($event, data.rotation_image)"></u-swiper>
                
                <!-- <view class="top-float" :style="{top: statusBar + 55 + 'px'}">
                    <view>
                        <swiper class="buySwiper" autoplay circular vertical>
                        	<swiper-item v-for="(item,index) in 3" :key="index">
                        		<view class="order-tip">
                                    <view>李**1秒前成功预约日常保洁服务</view>
                                </view>
                        	</swiper-item>
                        </swiper>
                    </view>
                    <view class="total">
                        <view class="total-order">总订单量</view>
                        <view class="total-num">
                            {{data.order}}
                            <text class="u-font-20">万</text>
                        </view>
                    </view>
                </view> -->
            </view>
            
            <!-- 一级热门分类 -->
            <view class="nav-box">
                <image :src="data.background" class="nav-bg"></image>
                <view class="nav">
                    <scroll-view scroll-x>
                        <view class="nav-i">
                            <view class="nav-i2" v-for="(item, index) in data.service_items" :key="index">
                                <image :src="item.image" class="nav-img"
                                    @click="toPage(`/pages/goods/goods-details?sId=1&sType=2&iId=${item.id}`)"></image>
                            </view>
                        </view>
                    </scroll-view>
                </view>
            </view>
            
            <view class="ad-box">
                <view class="hb-box">
                    <!-- 伙伴计时 -->
                    <image :src="data.service_type[0].image" class="hbjs" @click="toPage(`/pages/goods/goods-details?sId=1&sType=1`)"></image>
                    <view>
                        <!-- 伙伴定制 -->
                        <image :src="data.service_type[1].image" class="hb" @click="toPage(`/pages/goods/goods-details?sId=2&sType=1`)"></image>
                        <!-- 伙伴+ -->
                        <image :src="data.service_type[2].image" class="hb" @click="toPage(`/pages/goods/goods-details?sId=3&sType=1`)"></image>
                    </view>
                </view>
                <view class="hb-box">
                    <!-- 家庭教育课堂 -->
                    <image :src="data.service_type[3].image" class="hb" @click="toPage(`/pages/goods/goods-details?sId=4&sType=1`)"></image>
                    <!-- 了解自己-跳出小程序，外链接 -->
                    <image :src="data.service_type[4].image" class="hb" @click="toLink(data.service_type[4])"></image>
                </view>
                <!-- 实时在线订单 -->
                <!-- <image :src="data.service_type[5].image" class="sszxdd" @click="toPage(`/mine/pages/online-order/online-order`)"></image> -->
            </view>
            
            <view v-if="data.service_staff && data.service_staff.length > 0">
                <view class="title" @click="toPage(`/mine/pages/service/service`)">
                    <view>推荐陪伴师</view>
                    <view class="more">更多</view>
                </view>
                <view class="box">
                    <view class="item" v-for="(item, index) in data.service_staff" :key="index" 
                        @click="toPage(`/mine/pages/service/service-details?id=${item.id}`)">
                        <image :src="item.image" class="avatar"></image>
                        <view class="u-flex-1">
                            <view class="item-r-t">
                                <view class="name">{{item.name}}</view>
                                <view class="real">已实名</view>
                                <u-icon name="star-fill" color="#fec427" size="28"></u-icon>
                                <view class="star-num">{{item.star}}</view>
                            </view>
                            <view class="great">擅长：{{item.be_good_at}}</view>
                        </view>
                    </view>
                </view>
            </view>
            
            <view v-if="data.publicize && data.publicize.length > 0">
                <view class="title" @click="toPage(`/mine/pages/company/company`)">
                    <view>公司宣传</view>
                    <view class="more">更多</view>
                </view>
                <view class="company">
                    <scroll-view scroll-x>
                        <view class="company-i">
                            <view class="company-i2" v-for="(item, index) in data.publicize" :key="index"
                                @click="toPage(`/pages/goods/goods-details?sId=1&sType=4&puId=${item.id}`)">
                                <image :src="item.image" class="company-img"></image>
                                <view class="u-flex u-row-left">
                                    <view class="company-time">{{item.end_time}}截止</view>
                                </view>
                                <view class="company-name">{{item.title}}</view>
                            </view>
                        </view>
                    </scroll-view>
                </view>
            </view>
            
            <!-- 二级热门分类 -->
            <view class="down">
                <view class="down-nav">
                    <scroll-view scroll-x>
                        <view class="down-nav-i">
                            <view class="down-nav-i2" :class="{isNav : cateId == item.id}" 
                                v-for="(item, index) in data.service_items2" :key="index" @click="chooseCate(item)">
                                {{item.name}}
                            </view>
                        </view>
                    </scroll-view>
                </view>
                <view class="down-img-box">
                    <image :src="item.image" class="down-img" v-for="(item, index) in cateList" :key="index"
                         @click="toPage(`/pages/goods/goods-details?sId=1&sType=3&itId=${item.id}`)"></image>
                </view>
            </view>
        </view>
        
        <!-- 底部导航 -->
        <u-tabbar v-model="current" :list="tab_list" active-color="#f29700" :border-top="false" height="120" @change="tabbarChange"></u-tabbar>
    </view>
</template>

<script>
    import { IMAGEURL } from '@/static/js/common.js';
    export default {
        data() {
            return {
                IMAGEURL,
                statusBar: 0,
                background: { backgroundColor: 'rgba(255,255,255,0)' },
                current: 0, //底部导航索引
                tab_list: [
                    {
                        iconPath: "/static/icon/tab.png",
                        selectedIconPath: "/static/icon/tab.png",
                        text: '',
                        pagePath: "/pages/tabbar/index",
                        customIcon: false
                    },
                    // {
                    //     iconPath: "/static/icon/tab_01.png",
                    //     selectedIconPath: "/static/icon/tab_02.png",
                    //     text: '订单',
                    //     customIcon: false,
                    //     pagePath: "/pages/tabbar/order"
                    // },
                    {
                        iconPath: "/static/icon/tab_03.png",
                        selectedIconPath: "/static/icon/tab_04.png",
                        text: '活动',
                        customIcon: false,
                        pagePath: "/pages/tabbar/activity"
                    },{
                        iconPath: "/static/icon/tab_05.png",
                        selectedIconPath: "/static/icon/tab_06.png",
                        text: '我的',
                        customIcon: false,
                        pagePath: "/pages/tabbar/mine"
                    }
                ],
            
                data: {},
                cateId: '',//二级分类id
                cateList: [],//二级分类
                cityName: '',
                cityId: '',
            };
        },
        onLoad() {
            let _this = this;
            //状态栏高度
            uni.getSystemInfo({
            	success: function(res) {
            		_this.statusBar = res.statusBarHeight;
            	}
            });
            
            // 接收选择城市监听
            // uni.$on('CHOOSE_CITY', data => {
            //     console.log(data)
            //     this.cityId = data.id
            //     this.cityName = data.name
            // })
            
        },
        onShow() {
            console.log('城市', uni.getStorageSync('cityName'))
            if (!uni.getStorageSync('cityName')) {
                this.$gTo(`/mine/pages/city/city`)
            } else {
                this.cityId = this.$getSync('cityId')
                this.cityName = this.$getSync('cityName')
            }
            this.getIndexData()
        },
        methods: {
            // 了解自己
            toLink(item) {
                uni.navigateToMiniProgram({
                    appId: item.link,
                })
            },
            
            toPage(url) {
                if (!this.$getSync('userToken')) {
                    this.$gTo(`/pages/login/login`)
                } else {
                    this.$gTo(url)
                }
            },
            
            // 切换分类
            chooseCate(item) {
                if (this.cateId == item.id) return
                this.cateList = item.items
                this.cateId = item.id
            },
            
            getIndexData(){
            	this.$ajax('index', {
            		user_token: this.$getSync('userToken'),
            		city_id: this.cityId,
            	}).then(ret => {
            		if (ret.success == 1000) {
            			this.data = ret.detail;
                        if (this.data&&this.data.service_items2&&this.data.service_items2[0]) {
                            this.cateList = this.data.service_items2[0].items
                            this.cateId = this.data.service_items2[0].id
                        }
                        
            		} else {
            			this.$toast(ret.msg);
            		}
            	});
            },
            
            //切换底部导航
            tabbarChange(e) {
            	this.current = e;
            },
            
            onPageScroll: function(e) {
            	//nvue暂不支持滚动监听，可用bindingx代替
            	// console.log("滚动距离为：" + e.scrollTop);
            	let a = e.scrollTop * 0.05;
            	if (a > 1) {
            		a = 1;
            	}
            	if (e.scrollTop == 0) {
            		this.background.backgroundColor = 'rgba(255,255,255,0)';
            	} else {
            		this.background.backgroundColor = 'rgba(255,255,255,' + a + ')';
            	}
            },
        }
    };
</script>

<style>
    .u-tabbar__content__item .u-icon__img {
    	width: 50rpx !important;
    	height: 50rpx !important;
    }
    .u-tabbar__content>.u-tabbar__content__item:first-child .u-icon__img{
        width: 100rpx !important;
        height: 100rpx !important;
    }
</style>

<style lang="scss">
    
    
    page{
        background-color: #f5f7fa;
    }
    .content{
        padding-bottom: 50rpx;
    }
    .head{
        width: 100vw;
        padding: 0 30rpx;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .head-left{
        width: 270rpx;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .head-add{
        font-size: 30rpx;
        color: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-right: 10rpx;
    }
    .logo-01{
        width: 186rpx; 
        height: 75rpx;
    }
    
    .swiper-box{
        position: relative;
    }
    .top-float{
        width: 100%; 
        padding: 0 20rpx;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        position: absolute;
        left: 0;
    }
    .buySwiper {
    	width: 450upx;
    	height: 44upx;
    }
    .buySwiper swiper-item {
    	width: 100%;
    	height: 100%;
    	border-radius: 20upx;
    	overflow: hidden;
    }
    .buySwiper swiper-item>image {
    	width: 100%;
    	height: 100%;
    }
    .order-tip {
    	display: flex;
    	background-color: rgba(0, 0, 0, 0.4);
    	border-radius: 50upx;
    	width: 100%;
    	height: 100%;
    	align-items: center;
        padding: 0 20rpx;
    }
    .order-tip>view {
    	font-size: 24upx;
    	color: #fff;
    	width: 400upx;
    	white-space: nowrap;
    	overflow: hidden;
    	text-overflow: ellipsis;
    }
    
    .total{
        width: 140rpx;
        height: 60rpx;
        padding: 2rpx;
        background-color: #5e94ed;
        border-radius: 8rpx;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .total-order{
        width: 136rpx;
        height: 28rpx;
        background-color: #fff;
        border-radius: 8rpx 8rpx 0 0;
        font-size: 20rpx;
        color: #5e94ed;
        line-height: 28rpx;
        text-align: center;
    }
    .total-num{
        font-size: 22rpx;
        color: #fff;
        line-height: 28rpx;
        text-align: center;
    }
    
    .nav-box{
        width: 100%;
        // padding: 25rpx 0;
        position: relative;
    }
    .nav-bg{
        width: 750rpx;
        height: 258rpx;
    }
    .nav{
        position: absolute;
        top: 25rpx;
        left: 0;
        width: 100%;
        // background-color: #fdaa44;
        white-space: nowrap;
        // padding: 25rpx 0;
    }
    .nav-i{
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
    }
    .nav-i2{
        padding: 0 8rpx;
    }
    .nav-i2:first-child{
        padding-left: 20rpx;
    }
    .nav-i2:last-child{
        padding-right: 20rpx;
    }
    .nav-img{
        width: 160rpx;
        height: 200rpx;
        border-radius: 10rpx;
    }
    
    
    .ad-box{
        width: 750rpx;
        padding: 35rpx 25rpx 0;
    }
    .hb-box{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .hbjs{
        width: 334rpx;
        height: 295rpx;
        border-radius: 10rpx;
        margin-bottom: 15rpx;
    }
    .hb{
        width: 338rpx;
        height: 141rpx;
        border-radius: 10rpx;
        margin-bottom: 15rpx;
    }
    .sszxdd{
        width: 700rpx;
        height: 141rpx;
        border-radius: 10rpx;
        margin: 0 auto;
    }
    
    .title{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 36rpx;
        font-weight: bold;
        padding: 40rpx 25rpx 30rpx;
    }
    .more{
        font-size: 25rpx;
        font-weight: normal;
    }
    .box{
        margin: 0 25rpx;
        padding: 8rpx 30rpx;
        background-color: #fff;
        border-radius: 10rpx;
    }
    .item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 0;
    }
    .avatar{
        width: 95rpx;
        height: 95rpx;
        border-radius: 50%;
        margin-right: 20rpx;
    }
    .item-r-t{
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .name{
        max-width: 370rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 32rpx;
        font-weight: bold;
    }
    .real{
        padding: 7rpx 8rpx;
        background-color: #000;
        border-radius: 6rpx;
        font-size: 20rpx;
        color: #feeca8;
        line-height: 1;
        margin: 0 10rpx;
    }
    .star-num{
        font-size: 28rpx;
        font-weight: bold;
        padding-left: 6rpx;
    }
    .great{
        font-size: 24rpx;
        color: #949494;
        padding-top: 10rpx;
        width: 520rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .company{
        width: 100%;
        white-space: nowrap;
    }
    .company-i{
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
    }
    .company-i2{
        width: 281rpx;
        margin: 0 8rpx;
        background-color: #fff;
        border-radius: 10rpx;
        position: relative;
    }
    .company-i2:first-child{
        margin-left: 20rpx;
    }
    .company-i2:last-child{
        margin-right: 20rpx;
    }
    .company-img{
        width: 281rpx;
        height: 274rpx;
        border-radius: 10rpx 10rpx 0 0;
    }
    .company-time{
        padding: 8rpx 16rpx;
        background-color: #333333;
        font-size: 24rpx;
        color: #fff;
        position: absolute;
        left: 20rpx;
        bottom: 95rpx;
    }
    .company-name{
        width: 281rpx;
        padding: 35rpx 20rpx 40rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .down{
        margin-top: 40rpx;
        background-color: #fff;
        padding: 35rpx 5rpx;
        border-radius: 15rpx 15rpx 0 0;
    }
    .down-nav{
        width: 100%;
        white-space: nowrap;
    }
    .down-nav-i{
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
    }
    .down-nav-i2{
        font-size: 28rpx;
        color: #686868;
        padding: 0 25rpx;
        padding-bottom: 40rpx;
    }
    .isNav{
        font-size: 32rpx;
        font-weight: bold;
        color: #000;
        position: relative;
    }
    .isNav::after{
        display: block;
        content: '';
        width: 39rpx;
        height: 7rpx;
        background-color: #ffce78;
        border-radius: 8rpx;
        position: absolute;
        left: 50%;
        bottom: 30rpx;
        transform: translateX(-50%);
    }
    
    .down-img-box{
        padding: 0 18rpx;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
    }
    .down-img{
        width: 160rpx;
        height: 160rpx;
        border-radius: 10rpx;
        margin: 9rpx;
    }

</style>
